<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>在线投票系统</title>
<base href="../">
<link type="image/x-icon" href="images/yc.png" rel="shortcut icon"/>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>


 
<div id="header" class="wrap">
	<img src="images/logo.gif" />
</div>
<div id="navbar" class="wrap">
	<div class="profile">
		<b v-if="loginStatus">您好，{{user.uname}}</b>
		<b v-else><a href="login.html">请先登录</a></b>
		<span class="return"><a href="back/view.html">返回列表</a></span>
		<span class="addnew"><a href="back/add.html">添加新投票</a></span>
		<span class="modify"><a href="manage.html">维护</a></span>
		
	</div>
	<div class="search">
		<form method="post" action="#">
			<input type="text" name="keywords" class="input-text" value=""/><input type="submit" name="submit" class="input-button" value="" />
		</form>
	</div>
</div>

<div id="vote" class="wrap">
	<h2>参与投票</h2>
	<ul class="list">
		<li>
			<h4>{{topic.tname}}</h4>
			<p class="info">共有 {{topic.nums}}个选项，已有 {{topic.count}} 个网友参与了投票。</p>
			<form onsubmit="return false">
			   	<ol id="item_list">
			   		<li v-for="item in topic.topicItems" v-if="topic.types == 1">
			   			<label><input type="radio" name="options" :value="item.iid">{{item.iname}}</label>
			   			<li v-else><label><input type="checkbox" name="options" :value="item.iid">{{item.iname}}</label></li>
			   		</li>
			   	</ol>
			   	<p class="voteView"><input type="image" src="images/button_vote.gif" @click="addVote"/>
			   	<a href="Vote!view.action?entityId=103"><img src="images/button_view.gif"></a></p>
			</form>
		</li>
	</ul>
</div>
<div id="footer" class="wrap">
	源辰信息 &copy; 版权所有
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script type="text/javascript" src="js/check.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
	let app = new Vue({
		el: "#vote",
		data:{
			topic:{},
			tid:""
		},
		mounted: function(){
			let tid = location.search.replace("?","");
			if(tid ==""){
				location.href="manage.html";
				return;
			}
			console.log("bbb");
			this.tid = tid;
			axios.post("topic/findByTid",qs.stringify({tid:tid})).then(rt =>{
				if(rt.status ==200 && rt.data.code == 200){
					this.topic = rt.data.data;
					console.log("ccc");
					console.info(this.topic);//不加string字符串可以显示全部内容
					this.topic.nums = this.topic.topicItems.length;
					return;
				}
				
				location.href="manage.html";
				return;
			})
		},
		methods: {
			addVote: function(){
				let iids =[];
				$("#item_list input:checked").each(function(index, item){
					iids.push(item.value);
				})
				
				if(iids.length <=0){
					alert("请选择您要投票的选项。。。");
					return;
				}
				
				axios.post("topic/vote",qs.stringify({tid:this.tid, iids:iids.join(",")})).then(rt =>{
					if(rt.status ==200 && rt.data.code ==200){
						location.href="manage.html";
						this.topic =rt.data.data;
						this.topic.nums = this.topic.topicItems.length;
						return;
					}
					alert("投票失败，请稍后重试。。。。");
				})
			}
		}
	})
</script> 
</body>
</html>
